{extend name="base/common"}

{block name="style"}
<link rel="stylesheet" href="/static/datepicker/bootstrap-datetimepicker.min.css">
<style>
    .mail-search{max-width: 100% !important;}
    .input-group{float: left !important;}
    label{padding-top: 7px;}
    .btn-sm{height: 34px;}
    .exported{float: right;}
</style>
{/block}

{block name="page-header"}

{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="mail-box-header">
                <h2>在线审批 / 请假审批</h2>
                <div class="mail-tools tooltip-demo m-t-md">
                    <form method="get" action="" class="mail-search" id="form">
                        <div class="input-group col-lg-3">
                            <div class="col-lg-4 text-right control-label">
                                <label>开始时间:</label>
                            </div>
                            <div class="col-lg-8">
                                <input type="text" placeholder="请选择开始时间" class="form-control form_title datetimepicker" name="start_time" value="{$msg.start_time|default=''}">
                            </div>
                        </div>
                        <div class="input-group col-lg-3">
                            <div class="col-lg-4 text-right control-label">
                                <label>结束时间:</label>
                            </div>
                            <div class="col-lg-8">
                                <input type="text" placeholder="请选择结束时间" class="form-control form_title datetimepicker" name="end_time" value="{$msg.end_time|default=''}">
                            </div>
                        </div>
                        <div class="input-group col-lg-3">
                            <div class="col-lg-4 text-right control-label">
                                <label>审批状态:</label>
                            </div>
                            <div class="col-lg-6">
                                {empty name="msg.status"}
                                <select class="form-control" name="status">
                                    <option value="all" >全部</option>
                                    <option value="0">待审批</option>
                                    <option value="1">审批通过</option>
                                    <option value="2">审批不通过</option>
                                    <option value="3">进行中</option>
                                </select>
                                {else/}
                                <select class="form-control" name="status">
                                    <option value="all" {eq name="msg.status" value="all"}selected{/eq}>全部</option>
                                    <option value="0" {eq name="msg.status" value="0"}selected{/eq}>待审批</option>
                                    <option value="1" {eq name="msg.status" value="1"}selected{/eq}>审批通过</option>
                                    <option value="2" {eq name="msg.status" value="2"}selected{/eq}>审批不通过</option>
                                    <option value="3" {eq name="msg.status" value="3"}selected{/eq}>进行中</option>
                                </select>
                                {/empty}
                            </div>
                        </div>
                        <div class="input-group col-lg-2">
                            <!--                            <input type="text" class="form-control form_title" name="search" placeholder="搜索用户名">-->
                            <div class="input-group-btn">
                                <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-search"></i> 搜索</button>
                                <a class="btn btn-default" href="{:Url('Approval/leave')}">重置</a>
                            </div>
                        </div>
                    </form>
                </div>
                <button data-url="{:Url('Approval/export1')}" class="btn btn-primary btn-sm exported" ><i class="fa fa-upload"></i> 记录导出</button>
            </div>
            <div class="mail-box">
                <table class="table table-hover table-mail">
                    <thead>
                    <tr>
                        <th></th>
                        <th>申请人</th>
                        <th>请假类型</th>
                        <th>请假时间</th>
                        <th>请假天数</th>
                        <th>申请时间</th>
                        <th>内容备注</th>
                        <th>审批状态</th>
                    </tr>
                    </thead>

                    <tbody>
                    {volist name="list" id="vo"}
                    <tr>
                        <td class="check-mail"></td>
                        <td>{$vo.apply_name}</td>
                        <td>{$vo.type_text}</td>
                        <td>{$vo.start_time_text} - {$vo.end_time_text}</td>
                        <td>{$vo.duration} 天</td>
                        <td>{$vo.apply_time_text}</td>
                        <td>{$vo.content}</td>
                        <td>{$vo.status_text}</td>
                    </tr>
                    {/volist}
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="10">
                            <div class="page">{$list->render()}</div>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="/admin/js/plugins/iCheck/icheck.min.js"></script>
<script>
    highlight_subnav("{:Url('Approval/leave')}");

    $(document).ready(function(){
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        $(".check-all").on("ifChanged",function(){
            $("tbody").find(".ids").iCheck("toggle");
        });
    });
</script>
<!--时间日历-->
<script src="/static/datepicker/bootstrap-datetimepicker.js"></script>
<script>
    $(function(){
        //    时间日历
        $( ".datetimepicker" ).datetimepicker( {
            language:  'cn',
            format: 'yyyy-mm-dd',
            minView: 2,
            forceParse: false,
            todayBtn: true,
            autoclose: true,
            todayHighlight: 1,
            minuteStep: 5,
            initialDate: new Date(),//初始化当前日期

        });
        //    单选按钮
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });

        $(document).on("click", ".exported", function () {
            var url = $(".exported").attr("data-url");
            $.ajax({
                type:'post',
                url: url,
                data:{
                    start_time: $("input[name='start_time']").val(),
                    end_time: $("input[name='end_time']").val(),
                    status:$("select[name='status']").val(),
                    search: $("input[name='search']").val()
                },
                success: function (data) {
                    var msg = JSON.parse(data);
                    console.log(msg)
                    if(msg.code == 0) {
                        var url = msg.url.substr(1);
                        window.open(url, "_blank");
                        warning({shortCutFunction:'success',msg:'文件导出成功'});
                    }else {
                        warning({shortCutFunction:'error',msg:'文件导出失败'});
                    }

                }
            })
        })
    });

</script>
{/block}
